<template>
  <view class="home">
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" circular :duration="1000">
      <swiper-item v-for="(items, index) in Swiper" :key="index">
        <view class="swiper-item">
          <image :src="items.img" mode=""></image>
        </view>
      </swiper-item>
    </swiper>
    <view class="nav">
      <view
        class="nav_items"
        v-for="(items, index) in navs"
        :key="index"
        @click="navItemClick(items.path)"
      >
        <view :class="items.class"></view>
        <view>{{ items.text }}</view>
      </view>
    </view>
    <view class="shopList">
      <view class="shopTopTitle">
        <view>推荐商品</view>
      </view>
      <goods-list :Goods="Goods" />
    </view>
  </view>
</template>

<script>
import GoodsList from "../../components/goods-list/";
export default {
  data() {
    return {
      Swiper: [],
      Goods: [],
      navs: [
        {
          class: "iconfont icon-ziyuan",
          text: "黑马商城",
          path: "/pages/goods/index",
        },
        {
          class: "iconfont icon-guanyuwomen",
          text: "联系我们",
          path: "/pages/contact/index",
        },
        {
          class: "iconfont icon-tupian",
          text: "社区图片",
          path: "/pages/pics/index",
        },
        {
          class: "iconfont icon-shipin",
          text: "学习视频",
          path: "/pages/member/index",
        },
      ],
      initShopImg: [
        "https://demoapi.dtcms.net/upload/202104/11/bcf1872b-3357-49b0-b9ab-0d6bef017caa.jpg",
        "https://demoapi.dtcms.net/upload/202104/11/c1fb03ba-9c21-49cc-a2ee-dd63d934a342.jpg",
        "https://demoapi.dtcms.net/upload/202104/11/f55032a6-0e00-4766-a03e-96a6a9338760.jpg",
        "https://demoapi.dtcms.net/upload/202104/11/7a296204-1ea3-4e24-8eca-0e27316d36e1.jpg",
        "https://demoapi.dtcms.net/upload/202104/11/2ae8fbd4-2806-496f-be4c-93aeb392e789.jpg",
        "https://demoapi.dtcms.net/upload/202104/11/8d2a3e05-d9f8-439c-8412-a987f874d7c5.jpg",
        "https://demoapi.dtcms.net/upload/202104/11/dbc19c7c-7617-47d1-ac02-351c9fb8b278.jpg",
        "https://demoapi.dtcms.net/upload/202104/11/09e54e7a-27cc-4fd5-8da6-5a5673f539e5.jpg",
        "https://demoapi.dtcms.net/upload/202104/11/1bd64112-9038-4257-8332-866584f366bb.jpg",
      ],
    };
  },
  onLoad() {
    this.getSwipers();
    this.getGoods();
  },
  components: {
    "goods-list": GoodsList,
  },
  methods: {
    async getSwipers() {
      try {
        const res = await this.$myRequest({
          //调用封装api
          url: "/api/getlunbo",
        });
        this.Swiper = res.data.message;
      } catch (error) {
        this.Swiper = [
          {
            img: "http://destiny001.gitee.io/image/ban1.jpg",
          },
        ];
      }
    },
    async getGoods(num = 1) {
      //获取商品推荐列表
      try {
        const res = await this.$myRequest({
          url: `/api/getgoods?pageindex=${num}`,
        });
        this.Goods = res.data.message || [];
        this.initShopImg.forEach((img) => {
          this.Goods.map((items) => (items.img_url = img));
        });
        for (let i = 0; i < this.Goods.length; i++) {
          i < this.initShopImg.length //当接口数组大于初始化数组时，从头复制给接口数组
            ? (this.Goods[i].img_url = this.initShopImg[i])
            : (this.Goods[i].img_url = this.initShopImg[i - this.initShopImg.length]);
        }
      } catch {}
    },
    navItemClick(path) {
      uni.navigateTo({
        url: path + `?data=${JSON.stringify(this.initShopImg)}`,
      });
    },
  },
};
</script>

<style lang="scss">
.home {
  swiper {
    width: 750rpx;
    height: 380rpx;
    image {
      width: 100%;
    }
  }
  .nav {
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin: 10px 0;
    padding: 0 15rpx;
    .nav_items {
      view:nth-child(1) {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        background: $shop-color;
        line-height: 120rpx;
        color: white;
        font-size: 40rpx;
        margin-bottom: 10rpx;
      }
    }
  }
  .shopList {
    background-color: #eeeeee;
    margin-top: 10px;
    overflow: hidden;
    .shopTopTitle {
      height: 50px;
      line-height: 50px;
      color: $shop-color;
      letter-spacing: 10rpx;
      text-align: center;
      margin: 7px 0;
      background: white;
    }
  }
}
</style>
